<template>
	<view class="content">
		<view class="pingjia-list">
			<view class="kuang" v-for="(item, index) in info" :key="index">
				<view class="goods-item">
					<view class="uni-row">
						<view class="goods-icon"><image :src="item.img"></image></view>
						<view class="goodscontent">
							<view>{{ item.name }}</view>
							<view>
								<text>￥{{ item.true_price }}</text>
								<text class="right">×{{ item.count }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="uni-row border-bottom title-container">
					<view class="pingfen-title">评分</view>
					<view class="beizi-list">
						<!-- <image :src="getStar > index ? '../../static/images/pei.png' : '../../static/images/pei-no.png'" class="starImg" :style="{ width: starSize,height:starSize}"></image> -->
						<image
							:src="ind < xingji[index].star ? '../../static/images/pei.png' : '../../static/images/pei-no.png'"
							v-for="(it, ind) in xingji[index].beis"
							:key="ind"
							:data-index="ind"
							:data-gindex="index"
							@tap="changexingji"
						></image>
						<!-- <image src="../../static/images/pei.png"></image>
						<image src="../../static/images/pei-no.png"></image>
						<image src="../../static/images/pei-no.png"></image>
						<image src="../../static/images/pei-no.png"></image> -->
					</view>
				</view>
				<view>
					<textarea
						class="pinglun-textarea"
						v-model="item.content"
						placeholder="商品怎么样？您还满意吗？请写下您的看法吧。"
						placeholder-style="font-size:28rpx;color:#999"
					></textarea>
				</view>
				<view>
					<view class="uni-row border-bottom title-container"><view class="pingfen-title">添加图片内容</view></view>
					<view class="uni-row" style="margin-top: 30rpx;">
						<view class="uni-row">
							<view class="up-item" v-for="(img, xiabiao) in imgs[index].images" :key="xiabiao">
								<view class="up-img-container">
									<image src="../../static/images/del-icon.png" class="del-icon" @tap="delimgs" :data-imgindex="xiabiao" :data-index="index"></image>
									<image :src="img.img" class="up-img" @tap="yulan(img.img)"></image>
								</view>
							</view>
							<view class="up-item" v-if="imgs[index].images.length < 6">
								<view class="up-img-container"><image src="../../static/images/upload.png" class="up-img" @tap="upload(index)"></image></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 95rpx;"></view>
		<view class="bottom"><button class="pinjia-btn" @tap="pingjia_action()">发表评价</button></view>
	</view>
</template>

<script>
import httpPath from '@/static/js/path.js';
import { getlogin } from '@/static/js/login.js';
import { isshangjia } from '@/static/js/login.js';
export default {
	data() {
		return {
			role: 'p',
			wxinfo_id: '',
			del3_show: false,
			userinfo: {},
			info: {},
			oreder_id: '',
			xingji: [
				{
					beis: [
						'../../static/images/pei.png',
						'../../static/images/pei.png',
						'../../static/images/pei.png',
						'../../static/images/pei.png',
						'../../static/images/pei.png'
					],
					star: 0
				}
			], //储存星级
			imgs: [] //储存上传的图片
		};
	},
	onLoad(option) {
		this.userinfo = getlogin();
		this.role = isshangjia();
		this.wxinfo_id = this.userinfo.wxinfo_id;
		if (option.id) {
			this.oreder_id = option.id;
		}

		this.getdata();
	},
	methods: {
		// 预览图片
		yulan(img){
		  uni.previewImage({
			  urls: [img],
			  longPressActions: {
				  // itemList: ['发送给朋友', '保存图片', '收藏'],
				  success: function(data) {
					  console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				  },
				  fail: function(err) {
					  console.log(err.errMsg);
				  }
			  }
		  });
		},
		/**
		 * 删除图片
		 */
		delimgs(e){
			let index = e.currentTarget.dataset.index;
			let imgindex = e.currentTarget.dataset.imgindex;
			this.imgs[index].images.splice(imgindex,1);
		},
		/**
		 * 评价的具体操作
		 */
		pingjia_action() {
			let data = [];
			var reg = /,$/gi;
			for (let i = 0; i < this.info.length; i++) {
				data.push({
					wxinfo_id: this.wxinfo_id,
					spu_id: this.info[i].spu_id,
					thumb: this.info[i].imgs.replace(reg, ''),
					content: this.info[i].content,
					grade: this.xingji[i].star
				});
				if (this.info[i].content == '' || this.info[i].content == null) {
					uni.showModal({
						content: '请填写评论',
						showCancel: false
					});
					return false;
				}
			}
			let str = JSON.stringify(data);
			console.log(str);
			uni.request({
				url: httpPath.filePath + '/index/evaluate/index',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: {	wxinfo_id: this.wxinfo_id, list: str, id: this.oreder_id },
				success: res => {
					if (res.data.code == 200) {
						uni.showModal({
							showCancel:false,
							content:"评价成功"
						})
						uni.navigateBack()
					}
				}
			});
		},
		/**
		 * @param {Object} index上传图片
		 * index 商品序号
		 */
		upload(index) {
			let $this = this;
			let img_num = 6 - this.imgs[index].images.length;
			if (img_num == 0) {
				uni.showModal({
					content: '最多只能上传六张图片'
				});
				return false;
			}
			uni.chooseImage({
				count: img_num, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'],
				success: function(res) {
					for (let i = 0; i < res.tempFilePaths.length; i++) {
						uni.uploadFile({
							url: httpPath.filePath + '/index/common/upload_m', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[i],
							name: 'img',
							formData: {
								user: 'test'
							},
							success(res) {								
								let data = JSON.parse(res.data);
								if (data.code == 1) {
									$this.info[index].imgs += data.id + ',';
									$this.imgs[index].images.push({ id: data.id, img: httpPath.filePath + data.msg });
								} else {
									uni.showModal({
										showCancel: false,
										content: data.msg
									});
								}
							}
						});
					}
				}
			});
		},
		/**
		 * 改变星级
		 */
		changexingji(e) {
			let index = e.currentTarget.dataset.index;
			let gindex = e.currentTarget.dataset.gindex;
			this.xingji[gindex].star = index + 1;
		},
		/**
		 * 获取订单详情
		 */
		getdata() {
			uni.request({
				url: httpPath.filePath + '/index/orderform/detail',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: { id: this.oreder_id },
				success: res => {
					if (res.data.code == 200) {
						this.info = res.data.data.cartList;
						this.xingji = [];
						for (let i = 0; i < this.info.length; i++) {
							this.info[i].content = '';
							this.info[i].imgs = '';
							this.info[i].grade = 5;
							this.info[i].number = 0;
							this.xingji.push({
								beis: [
									'../../static/images/pei.png',
									'../../static/images/pei.png',
									'../../static/images/pei.png',
									'../../static/images/pei.png',
									'../../static/images/pei.png'
								],
								star: 0
							});
							this.imgs.push({ images: [] });
						}
					}
				}
			});
		}
	}
};
</script>

<style>
page {
	background: #f9f9f9;
}
.pingjia-list {
	margin-top: 32rpx;
}
.goods-icon {
	width: 107rpx;
	height: 107rpx;
	border-radius: 5px;
	border: 1px solid #f2f2f2;
	margin-right: 24rpx;
}
.goods-icon image {
	width: 107rpx;
	height: 107rpx;
	border-radius: 5px;
}
.goodscontent {
	width: 480rpx;
}
.goodscontent view:nth-of-type(1) {
	height: 76rpx;
	line-height: 38rpx;
	font-size: 28rpx;
}
.goodscontent view:nth-of-type(2) {
	font-size: 24rpx;
	color: #666666;
}
.right {
	float: right;
}
.pingfen-title {
	font-size: 32rpx;
	color: #333333;
	font-weight: bold;
	width: 50%;
}
.beizi-list {
	width: 50%;
	text-align: right;
}
.beizi-list image {
	width: 24rpx;
	height: 34rpx;
	margin-left: 25rpx;
}
.title-container {
	padding: 20rpx 0px 10rpx;
}
.pinglun-textarea {
	height: 539rpx;
	width: 100%;
	background: #f9f9f9;
	margin-top: 15rpx;
	box-sizing: border-box;
	padding: 24rpx;
	border-radius: 5px;
}
.bottom {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100rpx;
	background: #ffffff;
	border-top: 1px solid #f2f2f2;
}
.pinjia-btn {
	width: 395rpx;
	display: block;
	height: 80rpx;
	background: linear-gradient(-45deg, rgba(56, 209, 128, 0.96), rgba(154, 255, 221, 0.96));
	border-radius: 12rpx;
	color: #ffffff;
	margin-top: 10rpx;
}
</style>
